import {useRef} from 'react';
import {Table} from 'antd';
import InfiniteScroll from 'react-infinite-scroll-component';
import './index.css';
import './loading.css';
import {WeatherCapitalForecast} from '@/types/weather.ts';
import {Page} from '@/types/common';
import {formatDisplayDate} from "@/utils/time.ts";

interface WeatherTableProps {
    forecastPage: Page<WeatherCapitalForecast>;
    loadMoreData: () => void;
}

const WeatherTable = ({forecastPage, loadMoreData}: WeatherTableProps) => {
    const scrollParentRef = useRef(null);
    const sampleForecast = forecastPage.records[0]?.forecasts || [];

    const dayColumns = sampleForecast.map((f, i) => ({
        title: `${f.week} (${formatDisplayDate(f.date)})`,
        children: [
            {
                title: '白天',
                key: `${f.date}-day`,
                align: 'center',
                dataIndex: 'forecasts',
                render: (_, record: WeatherCapitalForecast) => {
                    const forecast = record.forecasts[i];
                    return forecast ? (
                        <>
                            <div className="child-row">{forecast.text_day}</div>
                            <div className="child-row">{forecast.high}°C</div>
                            <div>{forecast.wd_day} {forecast.wc_day}</div>
                        </>
                    ) : (
                        '--'
                    );
                },
            },
            {
                title: '夜间',
                key: `${f.date}-night`,
                align: 'center',
                dataIndex: 'forecasts',
                render: (_, record: WeatherCapitalForecast) => {
                    const forecast = record.forecasts[i];
                    return forecast ? (
                        <>
                            <div className="child-row">{forecast.text_night}</div>
                            <div className="child-row">{forecast.low}°C</div>
                            <div>{forecast.wd_night} {forecast.wc_night}</div>
                        </>
                    ) : (
                        '--'
                    );
                },
            },
        ],
    }));

    const columns = [
        {
            title: '省份',
            dataIndex: ['location', 'province'],
            key: 'province',
            fixed: 'left',
            align: 'center',
        },
        {
            title: '城市',
            width: 100,
            dataIndex: ['location', 'city'],
            key: 'city',
            fixed: 'left',
            align: 'center',
            render: (text: string) => <strong>{text}</strong>,
        },
        {
            title: '天气信息',
            key: 'weatherInfo',
            width: 100,
            render: () => {
                return <div style={{textAlign: "center"}}>
                    <div className="child-row">天气现象</div>
                    <div className="child-row">温度</div>
                    <div>风向&风力</div>
                </div>;
            },
        },
        ...dayColumns,
    ];

    return (
        <div style={{padding: '0 16px'}}>
            <div
                id="scrollableTable"
                ref={scrollParentRef}
                style={{height: 500, overflow: 'auto', padding: '0 16px'}}>
                <InfiniteScroll
                    dataLength={forecastPage.records.length}
                    next={loadMoreData}
                    hasMore={forecastPage.page < forecastPage.pages}
                    loader={<p style={{textAlign: 'center'}}>加载中</p>}
                    scrollableTarget="scrollableTable"
                >
                    <Table
                        rowKey={(record) => record.location.adcode}
                        columns={columns}
                        dataSource={forecastPage.records}
                        pagination={false}
                        bordered
                        className="weather-table"
                        scroll={{x: 'max-content'}}  // 启用水平滚动，内容超出时会自动滚动
                    />
                </InfiniteScroll>
            </div>
        </div>
    );
};

export default WeatherTable;
